<!-- 智能路由导航 -->
<template>
  <div v-if="show" class="fixed-content">
    <div class="mask"></div>
    <!-- 路由菜单主体 -->
    <div v-for="(item,index) in pathList" :key="item.path">
      <RouterItem :path="item" :level="level" :nowDeep="`${index}`" @pathDeep="pathDeep" @routerPush="routerPush"/>

    </div>
    <div class="kong"></div>
    <!-- 返回上一级菜单按钮 -->
    <div class="bottom-btn">
      <el-button @click="backRouter()">返回</el-button>
      <el-button @click="close()">关闭</el-button>
    </div>

  </div>
</template>

<script>
import RouterItem from "./RouterItem"

export default {
  props: {
    show: Boolean
  },
  components: {
    RouterItem
  },
  data() {
    return {
      pathList: [
        {
          path: '/enterpriseCarbonAccounting/dataQualityManage',
          name: '企业碳核算',
          childPath: [
            {
              path: '2',
              name: '组织概况',
              childPath: []
            },
            {
              path: '2',
              name: '组织边界',
              childPath: []
            },
            {
              path: '2',
              name: '营运边界',
              childPath: []
            },
            {
              path: '2',
              name: '温室气体量化',
              childPath: []
            },
            {
              path: '2',
              name: '基准年',
              childPath: []
            },
            {
              path: '2',
              name: '查证',
              childPath: []
            },
            {
              path: '2',
              name: '温室气体减量策略与绩效',
              childPath: []
            },
            {
              path: '2',
              name: '报告书的管理',
              childPath: []
            },


          ]
        },


      ],
      level: '',
      levelStack: []
    }
  },
  methods: {
    close() {
      this.$emit("close")
    },
    turnTo(path) {
      this.$router.push(path)
    },
    pathDeep(item) {  // 前往更深的节点
      this.levelStack.push(item.nowDeep) // 加入到栈中，用于返回上一级
      this.level = item.nowDeep
    },
    routerPush(item) {  // 跳转前往指定路由
      //   this.turnTo(item.path)
      this.close()
    },
    backRouter() { // 返回上一级状态
      if (this.levelStack.length >= 1) {
        this.levelStack.length = this.levelStack.length - 1
      }
      if (this.levelStack.length != 0) {
        this.level = this.levelStack[this.levelStack.length - 1]
        this.levelStack.length = this.levelStack.length - 1
      } else {
        this.level = ''
      }
    }
  },
  watch: {
    show() {
      console.log("change")
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-content {

  position: fixed;
  border-radius: 8px;
  left: 200px;
  top: 60px;
  background-color: rgba($color: #000, $alpha: 0.5);
  padding-top: 40px;
  height: auto;
  min-height: 400px;
  width: 300px;
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 10%);
  cursor: pointer;
  /* border: 2px solid #000; */
  position: fixed;
}

.bottom-btn {
  position: absolute;
  display: flex;
  bottom: 20px;
  right: 20px;
}

/* 遮罩层*/
.mask {
  background-color: rgba(43, 43, 43, 0.7);
  /* 使用固定定位让元素撑满全屏 */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.kong {
  height: 100px;
}
</style>
